<template>
  <div>
    <Panel title="充电枪管理" useBack>
        <div slot="body">
             <div class="title-box">
                <span>概况：</span>
                <div class="type-box all" >全部：{{total}}</div>
                <div class="type-box xian" >空闲：{{xian}}</div>
                <div class="type-box zhunbei" >准备充电中：{{zhuibei}}</div>
                <div class="type-box zhunbei" >充电中：{{chong}}</div>
                <div class="type-box yuyue" >占用未充电：{{yuyue}}</div>
                <div class="type-box wancheng" >充电完成：{{wancheng}}</div>
                <div class="type-box lixian" >故障：{{guzhnag}}</div>
                <div class="type-box guzhang" >离线：{{lixian}}</div>
                <div class="type-box liwang" >离网：{{liwang}}</div>
                <div class="type-box zhanwei" >占位：{{zhanwei}}</div>
                <div class="type-box power" >总功率：{{powerAll}}</div>
           </div>
           <div class="sear">
               <div class="line-title"></div>
               <div class="selectBox">
                    <label>站点：</label>
                    <el-select
                    filterable
                    style="width:160px"
                    v-model="site"
                    clearable
                    @change="getRefresh"
                    placeholder="请选择"
                    >
                    <el-option  v-for="item of siteList"
                        :key="item.id"
                        :value="item.id+''"
                        :label="item.name"></el-option>
                    </el-select>
                </div>
                <div style="display:flex"><el-button class="resh" type="primary" plain @click="getRefresh">刷新数据</el-button> 
                <!-- <el-button class="el-icon-s-help" type="warning"  @click="getRefresh">全站下线</el-button> -->
                </div>
           </div>
           <div class="gun">
               <div :class="item.state ? 'gun-item border'+item.state:'gun-item'" v-for="(item, index) in gunList" :key="index">
                   <div class="imgbox">
                       <div style="padding-left:10px;text-align:center;font-size:14px;color:#000">{{item.nick}}</div>
                       <!-- <span class="left-text" v-if="item.online == 1">{{item.state == 1 ? "空闲":item.state == 2 ? "已连接": item.state == 3 ?"充电中":item.state == 4 ?"预约中":item.state == 5 ?"充电完成":"故障"}}</span> -->
                       <!-- <span v-else-if="item.online == 2" class="left-text">故障</span> -->
                       <!-- <span v-else class="left-text">离线</span> -->
                       <div v-if="item.offNetwork">
                           <img src="@/assets/zhang.png" class="charge-img" alt="">
                       </div>
                       <div v-else-if="item.online == 0">
                           <img src="@/assets/lixian.png" class="charge-img" alt="">
                       </div>
                       <div v-else-if="item.online == 2">
                            <img  src="@/assets/zhang.png" class="charge-img" alt="">
                       </div>
                       <div v-else-if="item.online == 1  && item.state==0" class="ab-text">
                        <img src="@/assets/xian1.png" class="charge-img" alt="">
                       </div>
                       <div v-else>
                       <img v-if="item.state == 1 && !item.carConnect " src="@/assets/xian1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 1 && item.carConnect" src="@/assets/zhanwei.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 2" src="@/assets/chong1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 3" src="@/assets/chong1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 4" src="@/assets/zhanwei.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 5" src="@/assets/wancheng.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 6" src="@/assets/guzhang.png" class="charge-img" alt="">
                       
                       
                       </div>
                       <!-- <div class="ab-soc">90%</div> -->
                       <span class="ab-soc" v-if="item.soc && item.online ==1">{{item.soc ? item.soc+'%': '' }}</span>
                       <span v-if="item.online == 0" class="ab-text">离线</span>
                       <span v-else-if="item.online == 2" class="ab-text">故障</span>
                       <span v-else-if="item.state == 1  && item.carConnect" class="ab-text">占用未充电</span>
                       <span v-else-if="item.online == 1  && item.state==0" class="ab-text">在线</span>
                       <span v-else class="ab-text">
                        {{item.state == 1? '空闲': item.state == 2? '准备充电中': item.state == 3? '充电中': item.state == 4? '占用未充电': item.state == 5? '充电完成': item.state == 6? '故障': item.state == 7? '离网': '异常'}}
                    </span>
                   </div>
                   <div class="detail">
                       <span>{{item.sn}} </span>
                       <div class="line-div">
                           <span>电流:<span  class="numbers">{{item.current}}</span>A</span>
                           <span class="lines"></span>
                           <span>电压:<span  class="numbers">{{item.voltage}}</span>V</span>
                           <span class="lines"></span>
                           <span>功率:<span  class="numbers">{{item.power}}</span>KW</span>
                           <span class="lines"></span>
                           <span>温度：<span  class="numbers">{{item.gunTemperature}}</span>℃</span>
                       </div>
                       <!-- <div>
                           <span>功率:{{item.power}}KW</span>
                           <span>温度：{{item.gunTemperature }}℃</span>
                       </div> -->
                       <div class="line-div">
                           <span>今日电量(KW)：<span  class="numbers">{{item.dayPower}}</span></span>
                           <span class="lines"></span>
                           <span>总用电量(KW)：<span class="numbers">{{item.totalPower}}</span></span>
                           
                       </div>
                       <div>
                           <span>今日充电时间(小时)：<span class="numbers">{{item.dayTime}}</span> </span>
                           
                       </div>
                       <div>
                           <span>总充电时间(小时)： <span class="numbers">{{item.totalTime}}</span> </span>
                       </div>
                       <div>
                           <span>最后更新时间： <span class="numbers">{{item.lastUpdateTime}}</span> </span>
                       </div>
                       <div class="line-div" v-if="item.error">
                           <span>故障消息：{{item.error}}</span>
                       </div>
                       <div v-if="item.seatTime">
                           <span>占位时间(分钟)：{{item.seatTime}}</span>
                       </div>
                       <div>
                           <button class="tinfzhi" v-if="item.state ==3 && item.online ==1" @click="stopCharge(item.sn)">停充</button>
                           <el-popover
                           v-if="item.carConnect"
                                placement="right"
                                width="400"
                                trigger="click">
                                <div class="chargeOrder">
                                    <div class="line-div" v-if="item.phone">{{item.nick}} <span class="lines"></span> {{item.phone}}</div>
                                    <div v-else>运营商：{{item.nick}}</div>
                                    <div>车牌：{{item.plate}}</div>
                                    <div>预估剩余时间(小时)：<span>{{item.surplusTime}}</span></div>
                                    <div>订单编号：{{item.oid}}</div>
                                    <div v-if="item.seatPrice">占位费用：{{item.seatPrice}}</div>
                                    <div v-if="item.seatPrice">占位时间：{{item.beginSeatTime}}至{{item.endSeatTime}}</div>
                                </div>
                                <button slot="reference" class="chargeBtn">充电详情</button>
                            </el-popover>

<!-- 
                            <button  v-has="{action: 'iot:pile:pwd:refresh', effect: 'hide'}" class="view-btn" @click="reshPwd(item.sn)">刷新密码</button>
                            <el-popover
                                v-if="item.carConnect"
                                placement="right"
                                width="400"
                                 @hide="hide"
                                trigger="click">
                                <div class="chargeOrder">
                                    {{pwd}}
                                </div>
                                <button slot="reference" v-has="{action: 'iot:pile:pwd', effect: 'hide'}" class="view-btn" @click="viewPwd(item.gunId)">查看密码</button>
                            </el-popover> -->
                       </div>
                       
                   </div>
               </div>
           </div>
        </div>
       
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import request from "@/tools/request";
import { numToStringTime } from '@/tools/array.js'
export default {
  name: 'siteGunList_',
  components: {
    Panel,
  },
  data() {
    return {
     pwd:'',
     total: 0,
     xian:0,
     zhuibei:0,
     chong: 0,
     yuyue:0,
     wancheng: 0,
     guzhnag:0,
     lixian:0,
     liwang: 0,
     gunList: [],
     siteList: [],
     site: '',
     zhanwei:0,
     powerAll: 0,

    };
  },
  computed: {
 

  },
  methods: {
    async viewPwd(id ){
      let res = await request({
        url: `/iot/pile/gun/pwd/${id}`,
        method: "POST",
        data:  {}
      });
      if(res.code !==0) return
      this.pwd = res.pwd
    },
    async reshPwd(sn){
      let res = await request({
        url: `/iot/pile/gun/pwd/refresh/${sn}`,
        method: "POST",
        data:  {}
        });
        if(res.code !==0) return
       this.$message.success('刷新成功')
    },
    hide(){
        this.pwd =''
    },



    getRefresh(){
        this.fetchData()
        this.getGun()
    },
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      
      this.siteList.push(...list) 
    },
    async fetchData(){
      let site = this.site
      let { list } = await request({
        url: "/iot/count/states",
        method: "POST",
        data: {siteId: site}
      });
      this.xian = 0
      this.zhuibei = 0
      this.chong = 0
      this.yuyue = 0
      this.wancheng = 0
      this.guzhnag = 0
      this.lixian = 0
      this.liwang = 0
      this.zhanwei = 0
      
       var total = 0
       list.map(item => {
           if(item.state == 1){
               this.xian = item.total
           }else if(item.state == 2){
              this.zhuibei = item.total 
           }else if(item.state == 3){
              this.chong = item.total 
           }else if(item.state == 4){
              this.yuyue = item.total 
           }else if(item.state == 5){
              this.wancheng = item.total 
           }else if(item.state == 6){
              this.guzhnag = item.total 
           }else if(item.state == 7){
              this.liwang = item.total 
           }else if(item.state ==0){
              this.lixian = item.total 
           }else if(item.state==8){
            this.zhanwei = item.total
           }
           total+= item.total
       })
       
       this.total = total
    },

    async getGun() {
    let powerAll = 0
       let site = this.site
       let res= await request({
       url: '/iot/real/gun/list',
       method: "POST",
       data:{site: site}
     })
     if(res.code ==0){
         res.list.map(item => {
            item.surplusTime = numToStringTime(item.surplusTime)
            item.totalTime = numToStringTime(item.totalTime)
            item.dayTime = numToStringTime(item.dayTime)
            if(item.seatTime){
                item.seatTime = numToStringTime(item.seatTime)
            }
            powerAll+=item.power
            //  item.dayTime = item.dayTime ? (item.dayTime/3600).toFixed(2) :0
            //  item.totalTime = item.totalTime ? (item.totalTime/3600).toFixed(2) :0
            //  item.surplusTime = item.surplusTime ? (item.surplusTime/3600).toFixed(2) :0
            //  item.seatTime = item.seatTime ? (item.seatTime/60).toFixed(2) :0
             if(item.line == 0){
                 item.state = 6
             }
             return item
         })
       this.gunList = res.list
       this.powerAll = powerAll.toFixed(2)
     }
    },
    stopCharge(gunSn){
        this.$confirm('确认停止充电吗', '操作确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then( async () => {
            let res = await request({
            url: '/iot/pile/gun/control/stop/'+gunSn,
            method: 'GET',
            })
            if(res.code !==0) return
            this.$message.success('操作成功')
            if(this.tableData.length===1 && this.pager.current>1)
            this.$set(this.pager,'current', this.pager.current-1)
            this.getGun()
        })
    },

  },
  created() {
    if(this.$route.query.id)
    this.site = this.$route.query.id+''
    this.fetchData()
    this.getGun()
    this.iotSite()
  },
  mounted() {
  }
};
</script>

<style lang='scss' >
.view-btn{
    border: 1px solid #f56c6c;
    background: #fff;
    border-radius: 4px;
    color: #e73010;
    padding: 3px;
    margin-left: 4px;
}
.title-box {
    display: flex;
    align-items: center;
    .type-box {
        padding: 10px 5px;
        border-radius: 7px;
        color: #fff;
        margin-right: 5px;
        font-size: 14px;
    }
    .xian {
        background: #86cf18;
    }
    .zhunbei{
        background: #18baff;
    }
    .lixian {
        background: #ab6060;
    }
    .wancheng {
        background: #e2b942
    }
    .guzhang {
        background: #858585;
    }
    .liwang {
        background: #9a60b4;
    }
    .chong{
        background: #ea7ccc;
    }
    .yuyue {
        background: #ee6666;
    }
    .zhanwei{
        background: #eb7a1e;
    }
    .all{
        background: #fff;
        color: #19c5e0;
        border: 1px solid #19c5e0;
    }
    .power{
        border: 1px solid #303133;
    color: #000;
    
    }
}
.gun {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #6f6f6f;
}
.gun-item {
    display: flex;
    width: 427px;
    border: 2px solid burlywood;
    margin-right: 8px;
    border-radius: 5px;
    padding: 10px 10px 20px 10px;
    // height: 132px;
    margin-bottom: 20px;
    justify-content: flex-start;
    .imgbox {
        height: 113px;
        width: 100px;
        align-items: flex-start;
        justify-content: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .left-text {
            margin-left: 16px;
        }
        .charge-img {
            height: 87px;
        }
        .ab-soc {
            position: absolute;
            color: #a14e1e;
            font-weight: bold;
            top: 30px;
            left: 19px;
        }
        .ab-text {
            position: absolute;
            color: #687b81;
            bottom: -10px;
            font-size: 12px;
            left: 36%;
            transform: translateX(-50%);
        }
    }
    .detail {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 8px;
        color: #092638;
        font-size: 14px;
        .tinfzhi {
            padding: 3px 19px;
            background: #5dd6f1;
            text-align: center;
            color: #fff;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #5dd6f1;
        }
    }

}
.soc{ 
    font-weight: bold;
    color: #ce4300;
}
.border1 {
    border: 1px solid #a4de87;
}
.border2, .border3 {
    border: 1px solid #2ba6e0;
}
.border4 {
    border: 1px solid #f55ab9;
}
.border5, .border6 {
    border: 1px solid #a09c9c;
}
.lines {
    height: 15px;
    width: 2px;
    background: #ccdde6;
    display: block;
    margin: auto 4px;
    border-radius: 10px;
}
.line-title {
    border-radius: 2px;
    width: 8px;
    height: 25px;
    background-image: linear-gradient(90deg, #ef8b09, #fffdf5);
    margin: auto 4px;
}
.sear {
    display: flex;
    align-items: center;
    padding-top: 20px;
}
.resh {
    height: 34px;
    margin-left: 34px;
    display: flex;
    align-items: center;
}
.line-div{
    display: flex;
    // justify-content: space-around;
}
.chargeBtn{
    border: 1px solid #5dd6f1;
    background: #fff;
    border-radius: 4px;
    color: #5dd6f1;
    padding: 3px;
    
}
.chargeOrder {
    background: #e6f7ff;
    border-radius: 4px;
    padding: 18px 7px;
    color: #040404;
}
.numbers {
    font-weight: 700;
    color: #423932;
}
.selectBox {
  margin: 4px 0;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>